<template>
	<view class="">

		<picker mode="selector" :range="mar_list" range-key="name" @change="setname">
			<view class="title">
				<text>{{choosemarket?choosemarket.name:'未选择菜市场'}}</text>
				<image src="../static/icon_000001.png" mode=""></image>
			</view>
		</picker>
		<view class="seachbg">
			<picker mode="selector" :range="shop_list" range-key="name" @change="setname2">
				<view class="seach_l">
					<text>{{chooseshop?chooseshop.name:'请选择商家'}}</text>
					<image src="../static/icon_000001.png" mode=""></image>
				</view>
			</picker>
			<view class="seachbox">
				<image src="../static/img_000002.png" mode=""></image>
				<input type="text" placeholder="请输入商品名称搜索" v-model="productSearch.keyword">
				<view class="" @click="searchMarketAllProduct(true)">搜索</view>
			</view>
		</view>
		<view class="listbg" v-for="product in productList">
			<view class="title2">{{product.merchant.mer_name}}</view>
			<view class="listitem">
				<view class="goodspic">
					<image :src="product.image" mode=""></image>
				</view>
				<view class="goodsinfo">
					<view class="goodstit">{{product.store_name}}</view>
					<view class="goodsdesc">{{product.store_info}}</view>
					<view class="goodspirce">
						<!-- <text>￥{{product.attrValue[0].ot_price}}</text>￥
						<text>{{product.attrValue[0].price}}</text> -->
						<text v-if="product.ot_price">￥{{product.ot_price}}</text>
						<text v-else></text>
						￥<text>{{product.price}}</text>
					</view>
				</view>
				<view class="changepi" @click="goprice(product)">
					修改价格
				</view>
			</view>
		</view>
		<u-loadmore :status="loadStatus" />
	</view>
</template>

<script>
	import Cache from '@/util/cache.js'
	import {
		merchantListApi,
		marketListApi,
		merchantProductListApi
	} from '@/api/marService.js'
	export default {
		data() {
			return {
				choosemarket: '',
				mar_list: [],
				chooseshop: '',
				shop_list: [],
				productList: [],
				key: '',
				merSearch: { //菜市场下店铺搜索
					marId: 0
				},
				productSearch: { //店铺商品搜索
					page: 1,
					limit: 15,
					keyword: '',
					mer_id: 0,
					mar_id: 0
				},
				loadStatus: 'loadmore',
				searchType: 1, // 1普通 通过下拉选择搜索， 2通过关键字搜索  
			}
		},
		onLoad(e) {
			console.log(this.productSearch, 'productSearchproductSearch')
			if (e.comeType) { //修改后跳回来
				this.merSearch = Cache.get('merSearch_11', true)
				this.productSearch = Cache.get('productSearch_11', true)
				this.choosemarket = Cache.get('choosemarket_11', true)
				this.mar_list = Cache.get('mar_list', true)
				this.chooseshop = Cache.get('chooseshop_11', true)
				this.shop_list = Cache.get('shop_list_11', true)
				let page = this.productSearch.page
				this.productSearch.page = 0
				for (var i = 0; i <= page; i++) {
					this.productSearch.page += 1
					if (this.comeType == 1) {
						this.merProductList()
					} else {
						this.searchMarketAllProduct()
					}
				}
			} else {
				this.marList()
			}
		},
		onShow() {
			// if (this.productSearch.mar_id) {
			// 	this.merProductList(true)
			// }
		},
		onReachBottom() {
			this.productSearch.page += 1
			if (this.searchType == 1) {
				this.merProductList()
			} else {
				this.searchMarketAllProduct()
			}
		},
		methods: {
			/**
			 * 菜市场列表
			 */
			marList() {
				marketListApi().then(res => {
					this.mar_list = res.data
					this.choosemarket = ''
					this.chooseshop = ''
					if (this.mar_list.length) {
						this.productSearch.mar_id = this.mar_list[0].id
						this.choosemarket = this.mar_list[0]
						this.merSearch.marId = this.mar_list[0].id
						this.merList()
					}
				}).catch(err => {

				})

			},
			/**
			 * 商户列表
			 */
			merList() {
				merchantListApi(this.merSearch.marId).then(res => {
					this.shop_list = res.data
					this.productSearch.page = 1
					if (this.shop_list.length) {
						this.productSearch.mer_id = this.shop_list[0].mer_id
						this.chooseshop = this.shop_list[0]
						this.merProductList(1)
					}

				}).catch(err => {

				})
			},
			/**
			 * 商品列表 
			 * 针对某一个商户的商品列表
			 * @param {Object} is    是否重置分页数
			 */
			merProductList(is) {
				this.searchType = 1
				if (is) {
					this.productSearch.page = 1
				}
				this.loadStatus = 'loading'
				merchantProductListApi(this.productSearch).then(res => {
					if (!res.data.length) {
						this.loadStatus = 'nomore'
					} else {
						this.loadStatus = 'loadmore'
					}
					if (this.productSearch.page > 1) {
						this.productList.push(...res.data.data)
					} else {
						console.log("////////")
						this.productList = res.data.data
					}
				}).catch(err => {
					this.loadStatus = 'loadmore'
				})
			},

			/**
			 * 选择菜市场
			 * @param {Object} e
			 */
			setname(e) {
				this.chooseshop = ''
				this.choosemarket = this.mar_list[e.detail.value]
				this.merSearch.marId = this.choosemarket.id
				this.productSearch.mar_id = this.merSearch.marId
				this.productList = []
				this.merList()
			},
			/**
			 * 选择商户
			 * @param {Object} e
			 */
			setname2(e) {
				this.chooseshop = this.shop_list[e.detail.value]
				this.productSearch.mer_id = this.chooseshop.mer_id
				this.merProductList(1)
			},
			goprice(product) {
				Cache.set('merSearch_11', this.merSearch)
				Cache.set('productSearch_11', this.productSearch)
				Cache.set('choosemarket_11', this.choosemarket)
				Cache.set('mar_list', this.mar_list)
				Cache.set('chooseshop_11', this.chooseshop)
				Cache.set('shop_list_11', this.shop_list)


				uni.navigateTo({
					// url: "./price_change",
					url: `/P_service/other/price_change?product_id=${product.product_id}&searchType=${this.searchType}`
				})
			},
			/**
			 * 关键词搜索商品  
			 * 此搜索针对整个菜市场搜索
			 * @param {Object} is		是否 重置分页数
			 */
			searchMarketAllProduct(is) {
				this.searchType = 2
				let page;
				if (is) {
					this.productSearch.page = 1
				}
				page = this.productSearch.page
				let search = {
					page,
					limit: 15,
					keyword: this.productSearch.keyword,
					mar_id: this.productSearch.mar_id
				}
				this.loadStatus = 'loading'
				merchantProductListApi(search).then(res => {
					if (!res.data.length) {
						this.loadStatus = 'nomore'
					} else {
						this.loadStatus = 'loadmore'
					}
					if (this.productSearch.page > 1) {
						this.productList.push(...res.data.data)
					} else {
						this.productList = res.data.data
					}
				}).catch(err => {
					if (!res.data.length) {
						this.loadStatus = 'loadmore'
					}
				})
			}

		}
	}
</script>

<style>
	page {
		background: #F5F5F5;
	}

	.title {
		width: 750rpx;
		height: 90rpx;
		background: #FFFFFF;
		border-radius: 0px 0px 50rpx 50rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 32rpx;
		font-family: Microsoft YaHei;
		font-weight: bold;
		color: #333333;
	}

	.title image {
		width: 22rpx;
		height: 12rpx;
		margin-left: 18rpx;
	}

	.seachbg {
		width: 100%;
		height: 120rpx;
		box-sizing: border-box;
		padding: 0 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.seach_l {
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 26rpx;
		font-family: Microsoft YaHei;
		font-weight: bold;
		color: #333333;
	}

	.seach_l image {
		width: 20rpx;
		height: 10rpx;
		margin-left: 12rpx;
	}

	.seachbox {
		width: 462rpx;
		height: 60rpx;
		background: #FFFFFF;
		border-radius: 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.seachbox image {
		width: 26rpx;
		height: 26rpx;
		margin-left: 30rpx;

	}

	.seachbox input {
		width: 240rpx;
		font-size: 26rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
	}

	.seachbox view {
		width: 120rpx;
		height: 60rpx;
		background: #109C7A;
		border-radius: 30rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 30rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #FEFEFE;
	}


	.goodsinfo {
		height: 110rpx;
		display: flex;
		flex-direction: column;
		width: 340rpx;
	}

	.goodstit {
		font-size: 28rpx;
		font-family: Microsoft YaHei;
		font-weight: bold;
		color: #333333;
		line-height: 40rpx;
		width: 100%;
		text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden;
	}

	.goodsdesc {
		width: 100%;
		text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden;
		font-size: 20rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #666666;
		line-height: 40rpx;
	}

	.goodspirce {
		font-size: 24rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #F83535;
	}

	.goodspirce text:nth-of-type(1) {
		text-decoration: line-through;
		color: #999999;
		margin-right: 10rpx;
	}

	.goodspirce text:nth-of-type(2) {
		font-size: 28rpx;
		font-family: Microsoft YaHei;
		font-weight: bold;
		margin: 0 8rpx;
	}

	.changepi {
		width: 150rpx;
		height: 64rpx;
		background: linear-gradient(90deg, #29C9A2 0%, #109C7A 100%);
		border-radius: 32rpx;
		font-size: 28rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.listbg {
		overflow: hidden;
		width: 690rpx;
		height: auto;
		background: #FFFFFF;
		border-radius: 20rpx;
		margin-left: 30rpx;
		box-sizing: border-box;
		padding: 0 30rpx;
		margin-bottom: 30rpx;
	}

	.title2 {
		font-size: 30rpx;
		font-family: Microsoft YaHei;
		font-weight: bold;
		color: #333333;
		margin-top: 30rpx;
	}

	.listitem {
		width: 630rpx;
		height: 166rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-bottom: 1rpx solid #EEEEEE;
	}

	.goodspic {
		width: 110rpx;
		height: 110rpx;
		border-radius: 20rpx;
		overflow: hidden;
		position: relative;
	}

	.goodspic image:nth-of-type(1) {
		width: 100%;
		height: 100%;
		background: #F5F5F5;
	}

	.goodspic image:nth-of-type(2) {
		width: 54rpx;
		height: 50rpx;
		position: absolute;
		top: 0;
		left: 0;
	}
</style>
